<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.js"></script>
    <style>
        .box{
            float: left;
            width: 150px;
            height: 150px;
            margin: 1px;
            border: 1px solid black;
            text-align:center;
        }
        .boxls{
            background-image: url("images/framels.jpg");
        }
        .boxls:hover{
            background-image: url("images/framels_hover.jpg");
        }
        .boxpt{
            background-image: url("images/framept.jpg");
        }
        .boxpt:hover{
            background-image: url("images/framept_hover.jpg");
        }

        #show{
            position: absolute;
            width: 800px;
            height: 600px;
            left: 50%;
            margin-left: -400px;
            top: 50%;
            margin-top: -300px;
            display: none;
        }
        #close{
            /*position: absolute;
            left: 1275px;
            top: 205px;
            z-index: 12;*/
            float: right;

        }
        #bg{
             position: absolute;
             width: 800px;
             height: 600px;
             left: 50%;
             margin-left: -400px;
             top: 50%;
             margin-top: -300px;
             display: block;
             background-color: black;
             opacity: 0.8;
             z-index: 6;
         }
        .showIm{
            position: absolute;
            z-index: 6;
        }
        .showIm1{
            width: 300px;
            height: 450px;
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -225px;
            /*margin-top: 150px;
            margin-left: 250px;
            margin-right: 100px;*/

        }
        .showIm2{
            width: 450px;
            height: 300px;
            left: 50%;
            margin-left: -225px;
            top: 50%;
            margin-top:-150px ;
            /* margin-top: 150px;
             margin-left: 175px;
             margin-right: 175px;*/
        }
        #bg_bottom{
            position: relative;
            margin-top: 550px;
            color:white;
        }
        #pre{
            display:inline-block;
            width: 50%;
            text-align: center;
        }

        #next{
            display:inline-block;
            width: 50%;
            text-align: center;
        }
    </style>
</head>
<body>
<script>

    $(function(){
        for(var i=1;i<=30;i++){
            $("body").append("<div class='box'><img src='images/thumb/"+i+".jpg'/></div>");
        }

        $(".box img").load(function(){


        });

    });
    $(window).load(function(){
        var photo=$("img");
        for(var i=0;i<photo.length;i++){
            var temp=photo.eq(i);
            if(temp.height()<temp.width()){
                temp.css("margin-top","30px");
                $(".box").eq(i).addClass("boxls");
            }else{
                temp.css("margin-top","8px");
                $(".box").eq(i).addClass("boxpt");
            }
        }
    });

    $(function(){
        $(".box").click(function(){
            var index=$(".box").index(this)+1;
            var content=$("#show");
            content.css("display","block");
            content.empty();
            content.append("<div id='bg'>" +
                    "<div><img id='close' onclick='closeShow()' src='images/close.jpg'/></div>" +
                            "<div id='bg_bottom'><span id='pre' onclick='preImg()'><<<上一张</span>" +
                            "<span id='next' onclick='nextImg()'>下一张>>></span></div>"+
                    "</div>");
            var temp=$(".box img").eq(index-1);
            if(temp.height()>temp.width()){
                content.append("<div class='showIm showIm1'><img src='images/"+(index)+".jpg'/><div>");
            }else{
                content.append("<div class='showIm showIm2'><img src='images/"+(index)+".jpg'/><div>")
            }
            curImg=index;
        });
    });

    $("#close").click(function(){
        alert("sdfas");
    });

    function closeShow(){
        $("#show").css("display","none");
    }
    var curImg=0;
    $("#pre").click(function(){
        curImg--;
        $showIm=$(".showIm");
        $showIm.empty();
        if($showIm.hasClass("showIm1")){
            $showIm.removeClass("showIm1");
        }else{
            $showIm.removeClass("showIm2");
        }
        var temp=$(".box img").eq(curImg-1);
        if(temp.height()>temp.width()){
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm1");
        }else{
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm2");
        }
    });

    function preImg(){
        if(curImg==1){
            return;
        }
        curImg--;
        $showIm=$(".showIm");
        $showIm.empty();
        if($showIm.hasClass("showIm1")){
            $showIm.removeClass("showIm1");
        }else{
            $showIm.removeClass("showIm2");
        }
        var temp=$(".box img").eq(curImg-1);
        if(temp.height()>temp.width()){
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm1");
        }else{
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm2");
        }
    }

    function nextImg(){
        if(curImg==30){
            return;
        }
        curImg++;
        $showIm=$(".showIm");
        $showIm.empty();
        if($showIm.hasClass("showIm1")){
            $showIm.removeClass("showIm1");
        }else{
            $showIm.removeClass("showIm2");
        }
        var temp=$(".box img").eq(curImg-1);
        if(temp.height()>temp.width()){
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm1");
        }else{
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm2");
        }
    }
</script>
<div id="show"></div>
</body>
</html>